<template>
  <div class="map-editor">   
    <div class="map-editor-top">
      <Button class="cm-margin-right-5" type="primary" v-on:click="openMap">打开地图</Button>
      <Button class="cm-margin-right-5" v-if="openedId" type="primary" v-on:click="saveMap">保存地图</Button>
      <span class="map-editor-save-tip" v-if="!isSave">有未保存的变更</span>
      <div class="cm-margin-top-10" v-if="openedId">
        当前打开地图: {{ openedMapName }} (id: {{ openedId }})&nbsp;
        <a v-on:click="closeMap">关闭</a>
      </div>
    </div>
    <div class="map-editor-content">
      <div class="map-editor-content-wrapper" v-if="mapData" v-bind:style="mapStyle">
        <div class="map-editor-background"></div>
        <!-- 地图显示 -->
        <tiles-map
          ref="mapTiles"
          v-bind:tiles="mapData.items"
          v-bind:width="parseInt(this.mapData.colNum) * this.itemDefaultSize"
          v-bind:item-width="this.itemDefaultSize"
          v-bind:tile-width="this.itemDefaultSize"
          v-bind:tile-height="this.itemDefaultSize"
          v-bind:borderEnabled="true"
          v-bind:hover-border-enabled="!isSelectedObjShow"
          selected-mode="click"
          v-on:on-click="clickItemHandler"
          v-on:on-mouse-enter="mouseenterHandler"
          v-on:on-mouse-down="mousedownHandler"
          v-on:on-mouse-up="mouseupHandler"
          v-on:on-copy="copyHandler"
          v-on:on-paste="pasteHandler">
          <template v-slot:images="data">
            <!-- 层级图片 -->
            <div style="position: relative; width: 100%; height: 100%; z-index: 10;">
              <img class="map-editor-images"
                v-for="(obj, index) in data.item.objects"
                v-bind:key="index"
                v-if="isItemImgShow(obj, index)"
                v-bind:style="tileStyle(obj)"
                v-bind:src="mapSrc(obj)" />              
            </div>
            <!-- 编辑对象 -->
            <div class="map-editor-selected"
              style="z-index: 11;"
              v-if="isSelectedObjShow && hoverIndex === data.index"
              v-bind:style="selectedTilesStyle">
              <div class="map-editor-selected-item"
                style="z-index: 10;"
                v-for="(item, index) in selectedTilesList.list"
                v-bind:style="{ width: itemDefaultSize + 'px', height: itemDefaultSize + 'px' }">
                <img class="map-editor-images" v-bind:style="tileStyle(item)" v-bind:src="mapSrc(item)" />
              </div>
              <div class="selected-border-side" style="z-index: 11;"></div>
              <div class="selected-border-floor" style="z-index: 11;"></div>
            </div> 
          </template>
        </tiles-map>     
      </div>
    </div>
    <div class="map-editor-bottom">
      <div class="map-editor-bottom-wrapper" v-if="mapData">
        <div class="map-editor-bottom-layers">
          <div class="cm-bold cm-margin-bottom-5">当前编辑层</div>
          <Radio-group v-model="layerSelection" vertical>
            <Radio label="0">地表环境<Icon size="16" type="ios-eye" v-bind:class="{ 'layer-show': layerShowList.indexOf('0') >= 0 }" v-on:click.prevent="showLayerHandler('0')" /></Radio>
            <Radio label="1">装饰环境1<Icon size="16" type="ios-eye" v-bind:class="{ 'layer-show': layerShowList.indexOf('1') >= 0 }" v-on:click.prevent="showLayerHandler('1')" /></Radio>
            <Radio label="2">装饰环境2<Icon size="16" type="ios-eye" v-bind:class="{ 'layer-show': layerShowList.indexOf('2') >= 0 }" v-on:click.prevent="showLayerHandler('2')" /></Radio>
            <Radio label="3">互动物件<Icon size="16" type="ios-eye" v-bind:class="{ 'layer-show': layerShowList.indexOf('3') >= 0 }" v-on:click.prevent="showLayerHandler('3')" /></Radio>
            <Radio label="4">角色<Icon size="16" type="ios-eye" v-bind:class="{ 'layer-show': layerShowList.indexOf('4') >= 0 }" v-on:click.prevent="showLayerHandler('4')" /></Radio>
          </Radio-group>
        </div>
        <div class="map-editor-bottom-settings"></div>
        <div class="map-editor-bottom-tools">
          <div class="cm-bold cm-margin-bottom-5">工具</div>
          <div><Button size="small" type="primary" v-on:click="selectNone">取消选择</Button></div>
          <Checkbox v-model="eraseEnabled">擦除</Checkbox>
          <div><Button size="small" type="primary" v-on:click="fillEnvAll">刷全场</Button></div>
        </div>
        <div class="map-editor-bottom-others"></div>
      </div>
    </div>
    
    <Modal
      v-model="createModal"
      title="创建地图文件">
      <div class="cm-margin-bottom-5">地图【{{ selectedMapName }}】尚未创建地图文件，请进行创建</div>
      <Form ref="createForm" v-bind:model="createForm" v-bind:rules="createValidate" v-bind:label-width="80">
        <FormItem label="地图尺寸">
          <Row>
            <Col span="2">
              <span>行数</span>
            </Col>
            <Col span="10">
              <FormItem prop="row">
                <InputNumber v-bind:max="1000" v-bind:min="1" v-model="createForm.row"></InputNumber>
              </FormItem>
            </Col>
            <Col span="2">
              <span>列数</span>
            </Col>
            <Col span="10">
              <FormItem prop="col">
                <InputNumber v-bind:max="1000" v-bind:min="1" v-model="createForm.col"></InputNumber>
              </FormItem>
            </Col>
          </Row>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button v-on:click="createModal = false">取消</Button>
        <Button type="primary" v-bind:loading="createLoading" v-on:click="createMapFile">确定</Button>
      </div>
    </Modal>
    
    <Spin fix v-if="isLoading"></Spin>
  </div>
</template>

<script src="./mapEditor.js"></script>

<style lang="stylus">
@import './mapEditor.styl'
</style>
